<template>
    <div id="apps">
        <div style="margin-left: 20px;">
            <headtitle :title="title"></headtitle>
            <!-- <selectbeforethired :title="title" :sel1="sel1"></selectbeforethired> -->
        </div>
        <div style="margin-left: 20px;">
            <h3>处理问题报表</h3>
            <div style="width: 95%;" id="select1">
              <div >
                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block">
                        <el-date-picker v-model="value1" type="date" placeholder="年/月/日" :size="size"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
                <span>至</span>
                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block">
                        <el-date-picker v-model="value2" type="date" placeholder="年/月/日" :size="size"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
              
            </div>
            <div id="left" style="margin-left: -150px;">
                    <input type="text" style=" width: 300px; height: 22px;">
                    <div
                        style="width: 80px;height: 32px;border: 0px;background-color: #169bd5;color: white;line-height: 28px;text-align: center;display: inline-block;">
                        搜索</div>
                </div>
                <div id="right">

                    <div
                        style="width: 130px;height: 30px;background-color: #169bd5;display: inline-block;color: white;text-align: center;line-height: 28px;" @click="addtable">
                        新增报表</div>
                </div>
         
            </div>

        </div>
        <div id="table1">
            <div style="margin-left: 20px;">

                <el-table :data="tableData" style="width: 100% ;color: black;" height="450" border="true"
                    :cell-style="{ textAlign: 'center', padding: '6px 0' }"
                    :header-cell-style="{ 'text-align': 'center', color: 'black', height: '40px' }">
                    <el-table-column fixed prop="date" label="序号" width="60" />
                    <el-table-column prop="name" label="报表名称" width="450" />
                    <el-table-column prop="state" label="统计部门" width="180" />
                    <el-table-column prop="city" label="时间区间" width="250" />
                    <el-table-column prop="address" label="用途" width="100" />
                    <el-table-column prop="zip" label="图表" width="80" />
                    <el-table-column prop="data1" label="制作人" width="150" />
                    <el-table-column prop="data2" label="制作日期" width="200" />
                    <el-table-column fixed="right" label="操作" width="150">
                        <template #default="scope"  >
                            <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" @click="handleClick1(scope.row)">导出</el-button>
                            <el-button link type="primary" size="small" @click="handleClick2(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>


                </el-table>

            </div>
        </div>
        <!-- 分页 -->
        <div style="margin-left: 20px;" id="pageall">
            <span
                style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-right: 30px;height: 30px;">首页</span>

            <div class="page">
                <el-pagination background layout="prev, pager, next" :total="totallenght" @prev-click="prev"
                    @next-click="next" />

            </div>
            <span
                style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-left: 30px;height: 30px;">尾页</span>
        </div>
</div>
</template>

<script lang="ts">






import { useRouter } from 'vue-router'
import { ref } from 'vue'
// import {components} from 'vue'
// import  selectbeforethired from '../../components/Problems/selectbeforethired'
import headtitle from '../../components/Problems/headtitle.vue'
export default {
    name: 'Problemhistory',
    data() {
        return {
            title: "处理问题报表",
            sel1: "问题状态"
        }
    },
    components: {
        headtitle,
        //    selectbeforethired,
    },
    setup() {
        const router = useRouter()
        const handleClick = (value:any) => {
//   console.log(value)
const datas=JSON.stringify(value)
router.push({path:"/selectReport", query:{name:datas}})
 
}

const handleClick1 = (value:any) => {
//   console.log(value)
const datas=JSON.stringify(value)

 
  
}
const addtable=()=>{
    router.push({path:"/AddReport"})
    // console.log(11111)
}
const handleClick2 = (value:any) => {
//   console.log(value)
const datas=JSON.stringify(value)
  
}
        const size = ref<'default'>('default')

        const value1 = ref('')
        const value2 = ref('')
        // let datas=[];

        let page = 0;
        const prev = () => {
            page--;
            console.log(page)
        }
        const next = () => {
            page++;
            console.log(page)
        }
        const tableData = [
            {
                date: '1',
                name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
                state: '环保、行政许可',
                city: '2020-07-25 至 2020-08-25',
                address: '例行存档',
                zip: '无',
                data1: '李天然',
                data2: '2020-08-25 09:30:55',
                data3: '查看    导出    删除',
                
            },


        ];
        const totallenght = tableData.length
        const shortcuts = [
            {
                text: 'Today',
                value: new Date(),
            },
            {
                text: 'Yesterday',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24)
                    return date
                },
            },
            {
                text: 'A week ago',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                    return date
                },
            },
        ]

        const disabledDate = (time: Date) => {
            return time.getTime() > Date.now()
        };
        return {
            disabledDate,
            size,
            shortcuts,
            value2,
            value1,
            tableData,
            totallenght,
            prev,
            next,
             handleClick,
            handleClick1,
            handleClick2,
            addtable,

        }
    }
}
</script>

<style scoped>
#apps {
    background-color: white;
    width: 80%;
    /* height: 200px; */
    /* border: 1px solid red; */
    border-radius: 5px;
}

#pageall {
    width: 95%;
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

select {
    width: 120px;
    height: 28px;

}

#select1 {
    display: flex;
   justify-content: space-between;
}

#select2 {
    width: 95%;
   
}

#table1 {
    width: 95%;
    margin-top: 40px;
}
</style>